<!doctype html>
<html lang="zh-CN">
 <head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title>年度规划项目 - 学员端</title> 
  <script src="../javascript/reload.js"></script> 
  <script src="./1967868797977100288/resource_1764310000.js"></script> 
  <link href="./1967868797977100288/all.min.css" rel="stylesheet"> 
  <script src="./1967868797977100288/echarts.min.js"></script> 
  <script>tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#4080FF',
                        accent: '#0E42D2',
                        neutral: '#F5F7FA',
                        'neutral-dark': '#E5E6EB',
                        'text-primary': '#1D2129',
                        'text-secondary': '#4E5969',
                        'text-tertiary': '#86909C',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    spacing: {
                        '220': '220px',
                        '250': '250px',
                    }
                },
            }
        }</script> 
  <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .menu-active {
                @apply bg-primary/10 text-primary border-l-4 border-primary;
            }
            .menu-item {
                @apply flex items-center px-4 py-3 text-text-secondary hover:bg-neutral-dark transition-all duration-200 cursor-pointer;
            }
            .menu-item-active {
                @apply bg-primary/10 text-primary border-l-4 border-primary;
            }
            .submenu-item {
                @apply flex items-center px-8 py-2.5 text-text-secondary hover:bg-neutral-dark transition-all duration-200 cursor-pointer text-sm;
            }
            .submenu-item-active {
                @apply bg-primary/10 text-primary;
            }
            .card-shadow {
                box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.06);
            }
            .btn-primary {
                @apply bg-primary text-white px-4 py-2 rounded-md hover:bg-accent transition-all duration-200 flex items-center justify-center;
            }
            .btn-secondary {
                @apply bg-white text-primary border border-primary px-4 py-2 rounded-md hover:bg-primary/5 transition-all duration-200 flex items-center justify-center;
            }
            .btn-outline {
                @apply bg-white text-text-secondary border border-neutral-dark px-4 py-2 rounded-md hover:bg-neutral transition-all duration-200 flex items-center justify-center;
            }
            .input-field {
                @apply w-full px-3 py-2 border border-neutral-dark rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all duration-200;
            }
            .table-header {
                @apply bg-neutral text-text-secondary text-sm font-medium px-4 py-3;
            }
            .table-row {
                @apply border-b border-neutral-dark hover:bg-neutral/50 transition-all duration-200;
            }
            .badge {
                @apply px-2 py-1 rounded-full text-xs font-medium;
            }
            .badge-success {
                @apply bg-green-100 text-green-700;
            }
            .badge-warning {
                @apply bg-yellow-100 text-yellow-700;
            }
            .badge-danger {
                @apply bg-red-100 text-red-700;
            }
            .badge-info {
                @apply bg-blue-100 text-blue-700;
            }
            .badge-purple {
                @apply bg-purple-100 text-purple-700;
            }
            .badge-gray {
                @apply bg-gray-100 text-gray-700;
            }
            .progress-bar {
                @apply h-2 rounded-full overflow-hidden bg-neutral-dark;
            }
            .progress-value {
                @apply h-full rounded-full bg-primary transition-all duration-500 ease-out;
            }
        }
        .tab-btn {
            cursor: pointer;
            transition-all: duration-200;
        }
        .tab-btn.active {
            color: #165DFF;
        }
        .tab-content {
            display: none;
        }
        .tab-content.active {
            display: block;
        }
    </style> 
 </head> 
 <body class="font-inter bg-neutral text-text-primary h-screen flex overflow-hidden"> 
  <!-- 左侧菜单区域 --> 
  <aside id="sidebar" class="w-220 bg-white h-full shadow-md z-10 transition-all duration-300 ease-in-out"> 
   <!-- 品牌标识 --> 
   <div class="flex items-center justify-center h-16 border-b border-neutral-dark"> 
    <div class="flex items-center"> 
     <i class="fas fa-chart-line text-primary text-2xl mr-3"> </i> 
     <h1 class="text-xl font-bold text-primary"> Hi Quick AI </h1> 
    </div> 
   </div> 
   <!-- 菜单列表 --> 
   <nav class="py-4 h-[calc(100%-4rem)] overflow-y-auto scrollbar-hide"> 
    <!-- 每月必做 -->
    <div class="menu-group"> 
     <a class="yt-a-defalut-link menu-item flex justify-between" custom-a="true" custom-href="w=1181&amp;h=762&amp;appuuid=1969721745313103872&amp;version=2&amp;pageType=web&amp;uuid=1968264071639728128&amp;appName=年规学员端最新版1.1" href="javascript:void(0);" is-add="true" is-page="true" onclick="ytCustomLinkNavigation()" style="display: inline; padding: 0px; border: 0px; box-shadow: none;" target="_top"> 
      <div class="menu-item flex justify-between" data-menu="monthly" data-selectorname="#id-pe1s4" style="background-color:#ffffffff"> 
       <div class="flex items-center"> 
        <i class="fas fa-calendar-check text-lg mr-3"> </i> 
        <span class="" contenteditable="false" style="outline: none;"> 工作台 </span> 
       </div> 
      </div> </a> 
     <div class="submenu hidden" id="submenu-monthly"> 
     </div> 
    </div> 
    <!-- 公司公告 --> 
    <div class="menu-group"> 
     <a class="yt-a-defalut-link menu-item flex justify-between" custom-a="true" custom-href="w=1170&amp;h=728&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1968578812111224832&amp;appName=年规学员端最新版1.1" href="javascript:void(0);" is-add="false" is-page="true" onclick="ytCustomLinkNavigation()" style="display: inline; padding: 0px; border: 0px; box-shadow: none;" target="_top"> 
      <div class="menu-item flex justify-between" data-menu="announcements" data-selectorname="#id-wgtje" style="background-color:#ffffffff"> 
       <div class="flex items-center"> 
        <i class="fas fa-bullhorn text-lg mr-3"> </i> 
        <span> 公司公告 </span> 
       </div> 
      </div> </a> 
     <div class="submenu hidden" id="submenu-announcements"> 
     </div> 
    </div> 
    <!-- 年规管理 --> 
    <div class="menu-group"> 
     <div class="menu-item flex justify-between" data-menu="planning"> 
      <div class="flex items-center"> 
       <i class="fas fa-bullseye text-lg mr-3"> </i> 
       <span> 年规管理 </span> 
      </div> 
      <i class="fas fa-chevron-right text-xs transition-transform duration-200"> </i> 
     </div> 
     <div class="submenu hidden" id="submenu-planning"> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1321&amp;h=831&amp;appuuid=1969721745313103872&amp;version=2&amp;pageType=web&amp;uuid=1969787710210048000&amp;appName=demo1" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="false" style="display: flex; padding: 0px; border: 0px; box-shadow: none;"> 
       <div class="submenu-item" data-page="goal-dashboard" data-selectorname="#id-jffad" style> 
        <i class="fas fa-chart-pie text-xs mr-2"> </i> 
        <span style> 目标进度看板 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1390&amp;h=831&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1969803110087917568&amp;appName=demo1" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="false" style="display: flex; padding: 0px; border: 0px; box-shadow: none;"> 
       <div class="submenu-item" data-page="performance-entry" data-selectorname="#id-5sodz" style> 
        <i class="fas fa-pencil-alt text-xs mr-2"> </i> 
        <span style> 业绩回填 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967832363245240320&amp;appName=年规学员端左侧菜单版" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="true" style="display: flex; padding: 0px; border: 0px; box-shadow: none;"> 
       <div class="submenu-item" data-page="product-library" data-selectorname="#id-ztz3s" style> 
        <i class="fas fa-box text-xs mr-2"> </i> 
        <span style> 产品库 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1321&amp;h=831&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1969766167933353984&amp;appName=demo1" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="false" style="display: flex; padding: 0px; border: 0px; box-shadow: none;"> 
       <div class="submenu-item" data-page="marketing-plan" data-selectorname="#id-rdmqp" style> 
        <i class="fas fa-bullhorn text-xs mr-2"> </i> 
        <span style> 营销计划 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967839529905684480&amp;appName=年规学员端左侧菜单版" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="false" style="display: flex; padding: 0px; border: 0px; box-shadow: none;"> 
       <div class="submenu-item" data-page="customer-records" data-selectorname="#id-k2v2z" style> 
        <i class="fas fa-users text-xs mr-2" style> </i> 
        <span style> 客户档案 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967841389332922368&amp;appName=年规学员端左侧菜单版" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="true" style="display: flex; padding: 0px; border: 0px; box-shadow: none;"> 
       <div class="submenu-item" data-page="pk-activities" data-selectorname="#id-y9sdm" style> 
        <i class="fas fa-trophy text-xs mr-2" style> </i> 
        <span style> PK 活动 </span> 
       </div> </a> 
     </div> 
    </div> 
    <!-- 工作管理 --> 
    <div class="menu-group"> 
     <div class="menu-item flex justify-between" data-menu="work"> 
      <div class="flex items-center"> 
       <i class="fas fa-briefcase text-lg mr-3"> </i> 
       <span> 工作管理 </span> 
      </div> 
      <i class="fas fa-chevron-right text-xs transition-transform duration-200"> </i> 
     </div> 
     <div class="submenu hidden" id="submenu-work" data-ytextravalue="extra-kjgfy2b7r"> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967843857995399168&amp;appName=年规学员端左侧菜单版" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="true" style="display: flex; padding: 0px; border: 0px; box-shadow: none; opacity: 1; color: rgb(78, 89, 105); font-family: Inter, system-ui, sans-serif; font-size: 14px; font-weight: 400; font-style: normal; line-height: 20px; text-align: start; text-indent: 0px;" data-ytparentvalue="extra-kjgfy2b7r" data-ytoriginindex="0" data-ytindex="0" href="javascript:void(0);"> 
       <div class="submenu-item" data-page="work-dashboard" data-selectorname="#id-5e8cl" style> 
        <i class="fas fa-chart-bar text-xs mr-2"> </i> 
        <span style> 周日报管理 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967850301578805248&amp;appName=年规学员端左侧菜单版" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="true" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" data-ytoriginindex="1" data-ytindex="1"> 
       <div class="submenu-item" data-page="meeting-plan" data-selectorname="#id-0fkfi" style> 
        <i class="fas fa-calendar-alt text-xs mr-2"> </i> 
        <span style> 会议计划 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967852373321711616&amp;appName=年规学员端左侧菜单版" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="true" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" data-ytoriginindex="2" data-ytindex="2"> 
       <div class="submenu-item" data-page="work-tasks" data-selectorname="#id-hlcvn" style> 
        <i class="fas fa-tasks text-xs mr-2"> </i> 
        <span style> 工作任务 </span> 
       </div> </a> 
     </div> 
    </div> 
    <!-- 学习成长 --> 
    <div class="menu-group"> 
     <div class="menu-item menu-item-active flex justify-between" data-menu="learning"> 
      <div class="flex items-center"> 
       <i class="fas fa-graduation-cap text-lg mr-3"> </i> 
       <span> 学习成长 </span> 
      </div> 
      <i class="fas fa-chevron-down text-xs transition-transform duration-200"> </i> 
     </div> 
     <div class="submenu" id="submenu-learning"> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1113&amp;h=728&amp;appuuid=1969721745313103872&amp;version=2&amp;pageType=web&amp;uuid=1968967895824203776&amp;appName=年规学员端最新版1.1" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="false" style="display: flex; padding: 0px; border: 0px; box-shadow: none;"> 
       <div class="submenu-item" data-page="company-culture" data-selectorname="#id-udj1v" style> 
        <i class="fas fa-building text-xs mr-2"> </i> 
        <span style> 企业文化 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967868783729049600&amp;appName=年规学员端左侧菜单版" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="true" style="display: flex; padding: 0px; border: 0px; box-shadow: none;"> 
       <div class="submenu-item" data-page="course-center" data-selectorname="#id-mhqu4" style> 
        <i class="fas fa-book-open text-xs mr-2"> </i> 
        <span style> 课程中心 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967868795963834368&amp;appName=年规学员端左侧菜单版" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="true" style="display: flex; padding: 0px; border: 0px; box-shadow: none;"> 
       <div class="submenu-item" data-page="knowledge-base" data-selectorname="#id-hpgex" style> 
        <i class="fas fa-book text-xs mr-2"> </i> 
        <span data-selectorname="span" style> 知识库 </span> 
       </div> </a> 
      <div class="submenu-item submenu-item-active" data-page="learning-plan"> 
       <i class="fas fa-clipboard-list text-xs mr-2"> </i> 
       <span> 学习计划 </span> 
      </div> 
     </div> 
    </div> 
    <!-- 个人档案 --> 
    <div class="menu-group"> 
     <div class="menu-item flex justify-between" data-menu="profile"> 
      <div class="flex items-center"> 
       <i class="fas fa-user text-lg mr-3"> </i> 
       <span> 个人档案 </span> 
      </div> 
      <i class="fas fa-chevron-right text-xs transition-transform duration-200"> </i> 
     </div> 
     <div class="submenu hidden" id="submenu-profile"> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967868800292356096&amp;appName=年规学员端左侧菜单版" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="true" style="display: flex; padding: 0px; border: 0px; box-shadow: none;"> 
       <div class="submenu-item" data-page="basic-info" data-selectorname="#id-l1mtw" style> 
        <i class="fas fa-id-card text-xs mr-2"> </i> 
        <span data-selectorname="span" style> 基本信息 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967868801315766272&amp;appName=年规学员端左侧菜单版" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="true" style="display: flex; padding: 0px; border: 0px; box-shadow: none;"> 
       <div class="submenu-item" data-page="account-settings" data-selectorname="#id-f8y5s" style> 
        <i class="fas fa-cog text-xs mr-2"> </i> 
        <span data-selectorname="span"> 账号设置 </span> 
       </div> </a> 
     </div> 
    </div> 
   </nav> 
  </aside> 
  <!-- 右侧内容区域 --> 
  <main class="flex-1 flex flex-col overflow-hidden"> 
   <!-- 顶部导航栏 --> 
   <header class="h-16 bg-white border-b border-neutral-dark flex items-center justify-between px-6 z-10"> 
    <div class="flex items-center"> 
     <button id="toggle-sidebar" class="mr-4 text-text-secondary hover:text-primary transition-colors duration-200"> <i class="fas fa-bars text-xl"> </i> </button> 
     <div class="text-sm text-text-tertiary" id="breadcrumb"> 
      <span> 学习成长 </span> 
      <i class="fas fa-angle-right mx-2 text-xs"> </i> 
      <span> 学习计划 </span> 
     </div> 
    </div> 
    <div class="flex items-center space-x-6"> 
     <div class="relative"> 
      <input type="text" placeholder="搜索..." class="pl-10 pr-4 py-2 rounded-full text-sm border border-neutral-dark focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary w-64"> 
      <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-text-tertiary"> </i> 
     </div> 
     <div class="relative"> 
      <button class="relative text-text-secondary hover:text-primary transition-colors duration-200"> <i class="fas fa-bell text-xl"> </i> <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"> </span> </button> 
     </div> 
     <div class="flex items-center cursor-pointer group"> 
      <img src="./1967868797977100288/f48e4ae6256cb09fa61d11486866b14f.png" alt="用户头像" class="w-8 h-8 rounded-full object-cover border-2 border-transparent group-hover:border-primary transition-all duration-200"> 
      <div class="ml-2 hidden md:block"> 
       <div class="text-sm font-medium">
         张明 
       </div> 
       <div class="text-xs text-text-tertiary">
         销售部 
       </div> 
      </div> 
      <i class="fas fa-angle-down ml-1 text-text-tertiary"> </i> 
     </div> 
    </div> 
   </header> 
   <!-- 内容滚动区域 --> 
   <div class="flex-1 overflow-y-auto p-6 bg-neutral" id="content-area"> 
    <!-- 学习计划页面 --> 
    <div class="page active" id="page-learning-plan"> 
     <div class="flex justify-between items-center mb-6"> 
      <h2 class="text-2xl font-bold"> 学习计划 </h2> 
      <div class="flex space-x-3"> 
       <button class="btn-secondary" id="btn-add-plan"> <i class="fas fa-plus mr-2"> </i> 创建计划 </button> 
      </div> 
     </div> 
     <!-- 学习概览 --> 
     <div class="grid grid-cols-1 md:grid-cols-4 gap-5 mb-6"> 
      <div class="bg-white rounded-lg card-shadow p-5 transform transition-transform duration-300 hover:scale-[1.02]"> 
       <div class="flex items-start justify-between mb-4"> 
        <div> 
         <p class="text-text-tertiary text-sm mb-1"> 进行中计划 </p> 
         <h3 class="text-2xl font-bold"> 3 </h3> 
        </div> 
        <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-primary"> 
         <i class="fas fa-spinner"> </i> 
        </div> 
       </div> 
       <div class="flex items-center text-sm text-text-secondary"> 
        <div class="progress-bar w-full mr-2"> 
         <div class="progress-value" style="width: 65%"> 
         </div> 
        </div> 
        <span> 65% </span> 
       </div> 
      </div> 
      <div class="bg-white rounded-lg card-shadow p-5 transform transition-transform duration-300 hover:scale-[1.02]"> 
       <div class="flex items-start justify-between mb-4"> 
        <div> 
         <p class="text-text-tertiary text-sm mb-1"> 已完成课程 </p> 
         <h3 class="text-2xl font-bold"> 12 </h3> 
        </div> 
        <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-600"> 
         <i class="fas fa-check-circle"> </i> 
        </div> 
       </div> 
       <div class="flex items-center text-sm text-text-secondary"> 
        <span> 本月完成: </span> 
        <span class="ml-1 font-medium text-primary"> 3 门 </span> 
       </div> 
      </div> 
      <div class="bg-white rounded-lg card-shadow p-5 transform transition-transform duration-300 hover:scale-[1.02]"> 
       <div class="flex items-start justify-between mb-4"> 
        <div> 
         <p class="text-text-tertiary text-sm mb-1"> 学习时长 </p> 
         <h3 class="text-2xl font-bold"> 46.5h </h3> 
        </div> 
        <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600"> 
         <i class="fas fa-clock"> </i> 
        </div> 
       </div> 
       <div class="flex items-center text-sm text-text-secondary"> 
        <i class="fas fa-arrow-up text-green-500 mr-1"> </i> 
        <span> 较上月增长 12% </span> 
       </div> 
      </div> 
      <div class="bg-white rounded-lg card-shadow p-5 transform transition-transform duration-300 hover:scale-[1.02]"> 
       <div class="flex items-start justify-between mb-4"> 
        <div> 
         <p class="text-text-tertiary text-sm mb-1"> 获得证书 </p> 
         <h3 class="text-2xl font-bold"> 5 </h3> 
        </div> 
        <div class="w-10 h-10 rounded-full bg-amber-100 flex items-center justify-center text-amber-600"> 
         <i class="fas fa-award"> </i> 
        </div> 
       </div> 
       <div class="flex items-center text-sm text-text-secondary"> 
        <span> 进行中认证: </span> 
        <span class="ml-1 font-medium text-primary"> 产品专家 </span> 
       </div> 
      </div> 
     </div> 
     <!-- 学习计划tab切换 --> 
     <div class="mb-8"> 
      <div class="bg-white rounded-lg card-shadow p-0 mb-5"> 
       <div class="flex border-b border-neutral-dark"> 
        <button class="tab-btn active px-6 py-4 font-medium text-primary border-b-2 border-primary" data-tab="ongoing"> <i class="fas fa-spinner mr-2"> </i> 进行中 </button> 
        <button class="tab-btn px-6 py-4 font-medium text-text-secondary hover:text-primary transition-colors duration-200" data-tab="completed"> <i class="fas fa-check-circle mr-2"> </i> 已完成 </button> 
       </div> 
       <!-- 进行中的学习计划 --> 
       <div class="tab-content active p-5" id="ongoing-tab"> 
        <div class="space-y-4"> 
         <!-- 计划卡片1 --> 
         <div class="bg-white rounded-lg card-shadow overflow-hidden border-l-4 border-primary hover:shadow-lg transition-shadow duration-300"> 
          <div class="p-5"> 
           <div class="flex flex-col md:flex-row md:items-center justify-between mb-4"> 
            <div> 
             <div class="flex items-center mb-1"> 
              <h4 class="text-lg font-semibold mr-3"> 产品知识进阶计划 </h4> 
              <span class="badge badge-primary"> 进行中 </span> 
             </div> 
             <p class="text-sm text-text-tertiary"> 掌握公司核心产品功能及技术原理 </p> 
            </div> 
            <div class="mt-3 md:mt-0 flex space-x-3"> 
             <button class="btn-primary text-sm" id="continue-plan-1"> <i class="fas fa-play mr-1"> </i> 继续学习 </button> 
            </div> 
           </div> 
           <div class="mb-4"> 
            <div class="flex justify-between text-sm mb-1.5"> 
             <span class="text-text-secondary"> 学习进度 </span> 
             <span class="font-medium"> 68% </span> 
            </div> 
            <div class="progress-bar w-full"> 
             <div class="progress-value" style="width: 68%"> 
             </div> 
            </div> 
           </div> 
           <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm text-text-secondary"> 
            <div> 
             <div class="font-medium text-text-primary mb-1">
               12/18 
             </div> 
             <div>
               课程已完成 
             </div> 
            </div> 
            <div> 
             <div class="font-medium text-text-primary mb-1">
               24.5h 
             </div> 
             <div>
               学习时长 
             </div> 
            </div> 
            <div> 
             <div class="font-medium text-text-primary mb-1">
               85分 
             </div> 
             <div>
               平均成绩 
             </div> 
            </div> 
            <div> 
             <div class="font-medium text-text-primary mb-1">
               2023-07-30 
             </div> 
             <div>
               计划完成日 
             </div> 
            </div> 
           </div> 
          </div> 
         </div> 
         <!-- 计划卡片2 --> 
         <div class="bg-white rounded-lg card-shadow overflow-hidden border-l-4 border-secondary hover:shadow-lg transition-shadow duration-300"> 
          <div class="p-5"> 
           <div class="flex flex-col md:flex-row md:items-center justify-between mb-4"> 
            <div> 
             <div class="flex items-center mb-1"> 
              <h4 class="text-lg font-semibold mr-3"> 销售技巧提升计划 </h4> 
              <span class="badge badge-secondary"> 进行中 </span> 
             </div> 
             <p class="text-sm text-text-tertiary"> 提升客户沟通与谈判能力 </p> 
            </div> 
            <div class="mt-3 md:mt-0 flex space-x-3"> 
             <button class="btn-primary text-sm" id="continue-plan-2"> <i class="fas fa-play mr-1"> </i> 继续学习 </button> 
            </div> 
           </div> 
           <div class="mb-4"> 
            <div class="flex justify-between text-sm mb-1.5"> 
             <span class="text-text-secondary"> 学习进度 </span> 
             <span class="font-medium"> 42% </span> 
            </div> 
            <div class="progress-bar w-full"> 
             <div class="progress-value" style="width: 42%"> 
             </div> 
            </div> 
           </div> 
           <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm text-text-secondary"> 
            <div> 
             <div class="font-medium text-text-primary mb-1">
               5/12 
             </div> 
             <div>
               课程已完成 
             </div> 
            </div> 
            <div> 
             <div class="font-medium text-text-primary mb-1">
               15.2h 
             </div> 
             <div>
               学习时长 
             </div> 
            </div> 
            <div> 
             <div class="font-medium text-text-primary mb-1">
               92分 
             </div> 
             <div>
               平均成绩 
             </div> 
            </div> 
            <div> 
             <div class="font-medium text-text-primary mb-1">
               2023-08-15 
             </div> 
             <div>
               计划完成日 
             </div> 
            </div> 
           </div> 
          </div> 
         </div> 
         <!-- 计划卡片3 --> 
         <div class="bg-white rounded-lg card-shadow overflow-hidden border-l-4 border-amber-500 hover:shadow-lg transition-shadow duration-300"> 
          <div class="p-5"> 
           <div class="flex flex-col md:flex-row md:items-center justify-between mb-4"> 
            <div> 
             <div class="flex items-center mb-1"> 
              <h4 class="text-lg font-semibold mr-3"> 数据分析基础 </h4> 
              <span class="badge badge-warning"> 进行中 </span> 
             </div> 
             <p class="text-sm text-text-tertiary"> 掌握基础数据分析方法与工具使用 </p> 
            </div> 
            <div class="mt-3 md:mt-0 flex space-x-3" data-ytextravalue="extra-sojo43aho"> 
             <button class="btn-primary text-sm" id="continue-plan-3" data-ytoriginindex="1" data-ytindex="1"> <i class="fas fa-play mr-1"> </i> 继续学习 </button> 
            </div> 
           </div> 
           <div class="mb-4"> 
            <div class="flex justify-between text-sm mb-1.5"> 
             <span class="text-text-secondary"> 学习进度 </span> 
             <span class="font-medium"> 25% </span> 
            </div> 
            <div class="progress-bar w-full"> 
             <div class="progress-value" style="width: 25%"> 
             </div> 
            </div> 
           </div> 
           <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm text-text-secondary"> 
            <div> 
             <div class="font-medium text-text-primary mb-1">
               3/12 
             </div> 
             <div>
               课程已完成 
             </div> 
            </div> 
            <div> 
             <div class="font-medium text-text-primary mb-1">
               8.7h 
             </div> 
             <div>
               学习时长 
             </div> 
            </div> 
            <div> 
             <div class="font-medium text-text-primary mb-1">
               88分 
             </div> 
             <div>
               平均成绩 
             </div> 
            </div> 
            <div> 
             <div class="font-medium text-text-primary mb-1">
               2023-09-20 
             </div> 
             <div>
               计划完成日 
             </div> 
            </div> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
       <!-- 已完成的学习计划 --> 
       <div class="tab-content hidden p-5" id="completed-tab"> 
        <div class="overflow-x-auto"> 
         <table class="min-w-full divide-y divide-neutral-dark bg-white rounded-lg"> 
          <thead> 
           <tr> 
            <th class="table-header text-left w-1/3"> 计划名称 </th> 
            <th class="table-header text-left"> 完成时间 </th> 
            <th class="table-header text-left"> 课程数 </th> 
            <th class="table-header text-left"> 学习时长 </th> 
            <th class="table-header text-left"> 成绩 </th> 
            <th class="table-header text-left"> 操作 </th> 
           </tr> 
          </thead> 
          <tbody class="divide-y divide-neutral-dark"> 
           <tr class="table-row hover:bg-neutral/50 transition-colors duration-200"> 
            <td class="px-4 py-4 whitespace-nowrap"> 
             <div class="flex items-center"> 
              <img src="./1967868797977100288/20034d59e7380f5ba9a7e3b3a5bac7e3.png" alt="销售入门培训" class="w-12 h-12 rounded object-cover mr-3"> 
              <div> 
               <div class="font-medium">
                 销售入门培训 
               </div> 
               <div class="text-xs text-text-tertiary mt-0.5">
                 新员工入职必修课程 
               </div> 
              </div> 
             </div> </td> 
            <td class="px-4 py-4 whitespace-nowrap text-sm"> 2023-03-15 </td> 
            <td class="px-4 py-4 whitespace-nowrap text-sm"> 10门 </td> 
            <td class="px-4 py-4 whitespace-nowrap text-sm"> 32.5h </td> 
            <td class="px-4 py-4 whitespace-nowrap"> <span class="badge badge-success"> 优秀 </span> </td> 
            <td class="px-4 py-4 whitespace-nowrap"> 
             <div class="flex space-x-2"> 
              <button class="text-primary hover:text-accent transition-colors duration-200" title="查看详情"> <i class="fas fa-eye"> </i> </button> 
              <button class="text-text-secondary hover:text-primary transition-colors duration-200" title="重新学习"> <i class="fas fa-redo"> </i> </button> 
             </div> </td> 
           </tr> 
           <tr class="table-row hover:bg-neutral/50 transition-colors duration-200"> 
            <td class="px-4 py-4 whitespace-nowrap"> 
             <div class="flex items-center"> 
              <img src="./1967868797977100288/fcd206f757b0874065cd7c479b53aad3.png" alt="客户服务礼仪" class="w-12 h-12 rounded object-cover mr-3"> 
              <div> 
               <div class="font-medium">
                 客户服务礼仪 
               </div> 
               <div class="text-xs text-text-tertiary mt-0.5">
                 提升客户沟通体验 
               </div> 
              </div> 
             </div> </td> 
            <td class="px-4 py-4 whitespace-nowrap text-sm"> 2023-01-28 </td> 
            <td class="px-4 py-4 whitespace-nowrap text-sm"> 6门 </td> 
            <td class="px-4 py-4 whitespace-nowrap text-sm"> 18.2h </td> 
            <td class="px-4 py-4 whitespace-nowrap"> <span class="badge badge-success"> 优秀 </span> </td> 
            <td class="px-4 py-4 whitespace-nowrap"> 
             <div class="flex space-x-2"> 
              <button class="text-primary hover:text-accent transition-colors duration-200" title="查看详情"> <i class="fas fa-eye"> </i> </button> 
              <button class="text-text-secondary hover:text-primary transition-colors duration-200" title="重新学习"> <i class="fas fa-redo"> </i> </button> 
             </div> </td> 
           </tr> 
           <tr class="table-row hover:bg-neutral/50 transition-colors duration-200"> 
            <td class="px-4 py-4 whitespace-nowrap"> 
             <div class="flex items-center"> 
              <img src="./1967868797977100288/bfd372d60d894fa67151f7d46414dd16.png" alt="高效时间管理" class="w-12 h-12 rounded object-cover mr-3"> 
              <div> 
               <div class="font-medium">
                 高效时间管理 
               </div> 
               <div class="text-xs text-text-tertiary mt-0.5">
                 提升工作效率方法 
               </div> 
              </div> 
             </div> </td> 
            <td class="px-4 py-4 whitespace-nowrap text-sm"> 2022-11-05 </td> 
            <td class="px-4 py-4 whitespace-nowrap text-sm"> 8门 </td> 
            <td class="px-4 py-4 whitespace-nowrap text-sm"> 22.8h </td> 
            <td class="px-4 py-4 whitespace-nowrap"> <span class="badge badge-info"> 良好 </span> </td> 
            <td class="px-4 py-4 whitespace-nowrap"> 
             <div class="flex space-x-2"> 
              <button class="text-primary hover:text-accent transition-colors duration-200" title="查看详情"> <i class="fas fa-eye"> </i> </button> 
              <button class="text-text-secondary hover:text-primary transition-colors duration-200" title="重新学习"> <i class="fas fa-redo"> </i> </button> 
             </div> </td> 
           </tr> 
          </tbody> 
         </table> 
        </div> 
       </div> 
      </div> 
     </div> 
     <!-- 推荐学习计划 --> 
     <div> 
      <div class="flex justify-between items-center mb-5"> 
       <h3 class="text-xl font-bold flex items-center"> <i class="fas fa-lightbulb text-yellow-500 mr-2"> </i> 推荐学习计划 </h3> 
       <a href="javascript:void(0);" class="text-primary text-sm font-medium hover:underline flex items-center"> 更多推荐 <i class="fas fa-angle-right ml-1"> </i> </a> 
      </div> 
      <div class="grid grid-cols-1 md:grid-cols-3 gap-5"> 
       <!-- 推荐计划卡片1 --> 
       <div class="bg-white rounded-lg card-shadow overflow-hidden hover:shadow-lg transition-shadow duration-300 border border-neutral-dark hover:border-primary/30 transition-colors duration-200"> 
        <div class="relative"> 
         <img src="./1967868797977100288/2c2db65350e89da663e4a6b296c800c8.png" alt="高级销售技巧提升" class="w-full h-40 object-cover"> 
         <div class="absolute top-3 right-3 bg-primary text-white text-xs px-2 py-1 rounded-md">
           热门 
         </div> 
        </div> 
        <div class="p-5"> 
         <h4 class="text-lg font-semibold mb-2 hover:text-primary transition-colors duration-200"> 高级销售技巧提升 </h4> 
         <p class="text-sm text-text-secondary mb-4 line-clamp-2"> 掌握复杂销售场景下的谈判策略和客户关系维护技巧，提升高价值客户转化率。 </p> 
         <div class="grid grid-cols-3 gap-2 text-center text-sm mb-4"> 
          <div class="p-2 bg-neutral rounded-md"> 
           <div class="font-medium text-text-primary mb-1">
             15门 
           </div> 
           <div class="text-xs text-text-tertiary">
             课程 
           </div> 
          </div> 
          <div class="p-2 bg-neutral rounded-md"> 
           <div class="font-medium text-text-primary mb-1">
             42小时 
           </div> 
           <div class="text-xs text-text-tertiary">
             总时长 
           </div> 
          </div> 
          <div class="p-2 bg-neutral rounded-md"> 
           <div class="font-medium text-text-primary mb-1">
             中级 
           </div> 
           <div class="text-xs text-text-tertiary">
             难度 
           </div> 
          </div> 
         </div> 
         <div class="flex items-center justify-between"> 
          <div class="flex items-center text-sm text-text-tertiary"> 
           <i class="fas fa-users mr-1"> </i> 
           <span> 2,541人已学习 </span> 
          </div> 
          <button class="btn-primary text-sm px-3 py-1.5" id="enroll-plan-1"> <i class="fas fa-sign-in-alt mr-1"> </i> 加入计划 </button> 
         </div> 
        </div> 
       </div> 
       <!-- 推荐计划卡片2 --> 
       <div class="bg-white rounded-lg card-shadow overflow-hidden hover:shadow-lg transition-shadow duration-300 border border-neutral-dark hover:border-primary/30 transition-colors duration-200"> 
        <div class="relative"> 
         <img src="./1967868797977100288/887343da7646a40a3d9cc37037aedb1a.png" alt="客户关系管理" class="w-full h-40 object-cover"> 
         <div class="absolute top-3 right-3 bg-green-500 text-white text-xs px-2 py-1 rounded-md">
           新课 
         </div> 
        </div> 
        <div class="p-5"> 
         <h4 class="text-lg font-semibold mb-2 hover:text-primary transition-colors duration-200"> 客户关系管理 </h4> 
         <p class="text-sm text-text-secondary mb-4 line-clamp-2"> 学习客户生命周期管理方法，建立长期稳定的客户关系，提高客户满意度和忠诚度。 </p> 
         <div class="grid grid-cols-3 gap-2 text-center text-sm mb-4"> 
          <div class="p-2 bg-neutral rounded-md"> 
           <div class="font-medium text-text-primary mb-1">
             12门 
           </div> 
           <div class="text-xs text-text-tertiary">
             课程 
           </div> 
          </div> 
          <div class="p-2 bg-neutral rounded-md"> 
           <div class="font-medium text-text-primary mb-1">
             36小时 
           </div> 
           <div class="text-xs text-text-tertiary">
             总时长 
           </div> 
          </div> 
          <div class="p-2 bg-neutral rounded-md"> 
           <div class="font-medium text-text-primary mb-1">
             初级 
           </div> 
           <div class="text-xs text-text-tertiary">
             难度 
           </div> 
          </div> 
         </div> 
         <div class="flex items-center justify-between"> 
          <div class="flex items-center text-sm text-text-tertiary"> 
           <i class="fas fa-users mr-1"> </i> 
           <span> 876人已学习 </span> 
          </div> 
          <button class="btn-primary text-sm px-3 py-1.5" id="enroll-plan-2"> <i class="fas fa-sign-in-alt mr-1"> </i> 加入计划 </button> 
         </div> 
        </div> 
       </div> 
       <!-- 推荐计划卡片3 --> 
       <div class="bg-white rounded-lg card-shadow overflow-hidden hover:shadow-lg transition-shadow duration-300 border border-neutral-dark hover:border-primary/30 transition-colors duration-200"> 
        <div class="relative"> 
         <img src="./1967868797977100288/35495d970bb9322027a7ccb03064383d.png" alt="数据可视化与分析" class="w-full h-40 object-cover"> 
        </div> 
        <div class="p-5"> 
         <h4 class="text-lg font-semibold mb-2 hover:text-primary transition-colors duration-200"> 数据可视化与分析 </h4> 
         <p class="text-sm text-text-secondary mb-4 line-clamp-2"> 学习如何将复杂数据转化为直观图表，通过数据洞察驱动销售决策和业务增长。 </p> 
         <div class="grid grid-cols-3 gap-2 text-center text-sm mb-4"> 
          <div class="p-2 bg-neutral rounded-md"> 
           <div class="font-medium text-text-primary mb-1">
             18门 
           </div> 
           <div class="text-xs text-text-tertiary">
             课程 
           </div> 
          </div> 
          <div class="p-2 bg-neutral rounded-md"> 
           <div class="font-medium text-text-primary mb-1">
             54小时 
           </div> 
           <div class="text-xs text-text-tertiary">
             总时长 
           </div> 
          </div> 
          <div class="p-2 bg-neutral rounded-md"> 
           <div class="font-medium text-text-primary mb-1">
             高级 
           </div> 
           <div class="text-xs text-text-tertiary">
             难度 
           </div> 
          </div> 
         </div> 
         <div class="flex items-center justify-between"> 
          <div class="flex items-center text-sm text-text-tertiary"> 
           <i class="fas fa-users mr-1"> </i> 
           <span> 1,243人已学习 </span> 
          </div> 
          <button class="btn-primary text-sm px-3 py-1.5" id="enroll-plan-3"> <i class="fas fa-sign-in-alt mr-1"> </i> 加入计划 </button> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <!-- 其他页面内容保持不变 --> 
    <div class="page hidden" id="page-knowledge-base"> 
    </div> 
    <div class="page hidden" id="page-company-culture"> 
    </div> 
    <div class="page hidden" id="page-course-center"> 
    </div> 
    <div class="page hidden" id="page-work-dashboard"> 
    </div> 
    <div class="page hidden" id="page-meeting-plan"> 
    </div> 
    <div class="page hidden" id="page-work-tasks"> 
    </div> 
    <div class="page hidden" id="page-monthly-tasks"> 
    </div> 
    <div class="page hidden" id="page-latest-announcements"> 
    </div> 
    <div class="page hidden" id="page-historical-announcements"> 
    </div> 
    <div class="page hidden" id="page-goal-dashboard"> 
    </div> 
    <div class="page hidden" id="page-performance-entry"> 
    </div> 
    <div class="page hidden" id="page-product-library"> 
    </div> 
    <div class="page hidden" id="page-marketing-plan"> 
    </div> 
    <div class="page hidden" id="page-customer-records"> 
    </div> 
    <div class="page hidden" id="page-pk-activities"> 
    </div> 
    <div class="page hidden" id="page-basic-info"> 
    </div> 
    <div class="page hidden" id="page-account-settings"> 
    </div> 
   </div> 
  </main> 
  <!-- 创建计划模态框 --> 
  <div id="create-plan-modal" class="fixed inset-0 bg-black/50 z-50 hidden flex items-center justify-center p-4"> 
   <div class="bg-white rounded-lg w-full max-w-2xl max-h-[90vh] overflow-y-auto"> 
    <div class="p-5 border-b border-neutral-dark flex items-center justify-between"> 
     <h3 class="text-lg font-bold"> 创建学习计划 </h3> 
     <button id="close-create-modal" class="text-text-tertiary hover:text-text-primary transition-colors duration-200"> <i class="fas fa-times"> </i> </button> 
    </div> 
    <div class="p-5"> 
     <div class="grid grid-cols-1 md:grid-cols-2 gap-5 mb-5"> 
      <div> 
       <label class="block text-sm font-medium text-text-secondary mb-2"> 计划名称 <span class="text-red-500"> * </span> </label> 
       <input type="text" placeholder="输入学习计划名称" class="input-field" id="plan-name" required> 
      </div> 
      <div> 
       <label class="block text-sm font-medium text-text-secondary mb-2"> 计划类型 <span class="text-red-500"> * </span> </label> 
       <select class="input-field" id="plan-type" required> <option value> 请选择计划类型 </option> <option value="product"> 产品知识 </option> <option value="sales"> 销售技巧 </option> <option value="management"> 管理能力 </option> <option value="technical"> 技术能力 </option> <option value="other"> 其他 </option> </select> 
      </div> 
     </div> 
     <div class="mb-5"> 
      <label class="block text-sm font-medium text-text-secondary mb-2"> 计划目标 <span class="text-red-500"> * </span> </label> 
      <textarea rows="3" placeholder="描述学习计划的目标和期望成果" class="input-field" id="plan-objective" required>
        </textarea> 
     </div> 
     <div class="grid grid-cols-1 md:grid-cols-2 gap-5 mb-5"> 
      <div> 
       <label class="block text-sm font-medium text-text-secondary mb-2"> 计划开始日期 <span class="text-red-500"> * </span> </label> 
       <input type="date" class="input-field" id="plan-start-date" required> 
      </div> 
      <div> 
       <label class="block text-sm font-medium text-text-secondary mb-2"> 计划完成日期 <span class="text-red-500"> * </span> </label> 
       <input type="date" class="input-field" id="plan-end-date" required> 
      </div> 
     </div> 
     <div class="mb-5"> 
      <label class="block text-sm font-medium text-text-secondary mb-2"> 学习课程 <span class="text-red-500"> * </span> </label> 
      <div class="border border-neutral-dark rounded-md p-3 max-h-48 overflow-y-auto space-y-2"> 
       <label class="flex items-center p-2 hover:bg-neutral rounded-md cursor-pointer transition-colors duration-200"> <input type="checkbox" class="mr-3" value="course1"> 
        <div class="flex-1"> 
         <div class="font-medium text-sm">
           产品功能详解 
         </div> 
         <div class="text-xs text-text-tertiary">
           3.5小时 · 初级 
         </div> 
        </div> </label> 
       <label class="flex items-center p-2 hover:bg-neutral rounded-md cursor-pointer transition-colors duration-200"> <input type="checkbox" class="mr-3" value="course2"> 
        <div class="flex-1"> 
         <div class="font-medium text-sm">
           高级销售技巧 
         </div> 
         <div class="text-xs text-text-tertiary">
           4.2小时 · 中级 
         </div> 
        </div> </label> 
       <label class="flex items-center p-2 hover:bg-neutral rounded-md cursor-pointer transition-colors duration-200"> <input type="checkbox" class="mr-3" value="course3"> 
        <div class="flex-1"> 
         <div class="font-medium text-sm">
           客户心理学 
         </div> 
         <div class="text-xs text-text-tertiary">
           2.8小时 · 中级 
         </div> 
        </div> </label> 
       <label class="flex items-center p-2 hover:bg-neutral rounded-md cursor-pointer transition-colors duration-200"> <input type="checkbox" class="mr-3" value="course4"> 
        <div class="flex-1"> 
         <div class="font-medium text-sm">
           数据分析入门 
         </div> 
         <div class="text-xs text-text-tertiary">
           5.0小时 · 初级 
         </div> 
        </div> </label> 
       <label class="flex items-center p-2 hover:bg-neutral rounded-md cursor-pointer transition-colors duration-200"> <input type="checkbox" class="mr-3" value="course5"> 
        <div class="flex-1"> 
         <div class="font-medium text-sm">
           商务谈判策略 
         </div> 
         <div class="text-xs text-text-tertiary">
           3.8小时 · 高级 
         </div> 
        </div> </label> 
      </div> 
      <div class="text-right mt-2"> 
       <button class="text-primary text-sm hover:underline"> 添加更多课程 </button> 
      </div> 
     </div> 
     <div class="mb-5"> 
      <label class="block text-sm font-medium text-text-secondary mb-2"> 学习频率 </label> 
      <select class="input-field" id="study-frequency"> <option value="flexible"> 灵活安排 </option> <option value="daily"> 每天学习 </option> <option value="weekday"> 工作日学习 </option> <option value="weekend"> 周末学习 </option> <option value="weekly"> 每周固定 </option> </select> 
     </div> 
     <div class="mb-5"> 
      <label class="block text-sm font-medium text-text-secondary mb-2"> 每日学习时长（小时） </label> 
      <input type="number" min="0.5" max="8" step="0.5" value="1" class="input-field" id="daily-study-time"> 
     </div> 
    </div> 
    <div class="p-5 border-t border-neutral-dark flex justify-end space-x-3"> 
     <button id="cancel-create-plan" class="btn-outline"> 取消 </button> 
     <button id="submit-create-plan" class="btn-primary"> 创建计划 </button> 
    </div> 
   </div> 
  </div> 
  <script>// 页面加载时初始化
        document.addEventListener('DOMContentLoaded', () => {
            // 菜单切换功能
            const menuItems = document.querySelectorAll('.menu-item[data-menu]');
            menuItems.forEach(item => {
                item.addEventListener('click', () => {
                    // 移除所有菜单的活动状态
                    document.querySelectorAll('.menu-item').forEach(menu => { menu.classList.remove('menu-item-active'); });
                    
                    // 添加当前菜单活动状态
                    item.classList.add('menu-item-active'); 
                    
                    const menuId = item.getAttribute('data-menu');
                    const submenu = document.getElementById(`submenu-${menuId}`);
                    const icon = item.querySelector('i:last-child');
                    
                    // 切换子菜单显示/隐藏
                    if (submenu.classList.contains('hidden')) {
                        submenu.classList.remove('hidden');
                        icon.classList.remove('fa-chevron-right');
                        icon.classList.add('fa-chevron-down');
                    } else {
                        submenu.classList.add('hidden');
                        icon.classList.remove('fa-chevron-down');
                        icon.classList.add('fa-chevron-right');
                    }
                });
            });
            
            // 子菜单切换功能
            const submenuItems = document.querySelectorAll('.submenu-item[data-page]');
            submenuItems.forEach(item => {
                item.addEventListener('click', () => {
                    // 移除所有子菜单活动状态
                    document.querySelectorAll('.submenu-item').forEach(submenu => { submenu.classList.remove('submenu-item-active'); });
                    
                    // 添加当前子菜单活动状态
                    item.classList.add('submenu-item-active');
                    
                    // 获取页面ID和面包屑信息
                    const pageId = item.getAttribute('data-page');
                    const parentMenu = item.closest('.submenu').id.replace('submenu-', '');
                    const parentMenuText = document.querySelector(`.menu-item[data-menu="${parentMenu}"] span`).textContent;
                    const currentMenuText = item.querySelector('span').textContent;
                    
                    // 更新面包屑
                    document.getElementById('breadcrumb').innerHTML = `







<span>${parentMenuText}</span>
  <i class="fas fa-angle-right mx-2 text-xs">
  </i>
  <span>${currentMenuText}</span>
    
    
    
    
    
    
    
  `;
                    
                    // 切换页面显示
                    document.querySelectorAll('.page').forEach(page => { page.classList.add('hidden'); });                    
                    document.getElementById(`page-${pageId}`).classList.remove('hidden');
                });
            });
            
            // 侧边栏切换功能
            const toggleSidebar = document.getElementById('toggle-sidebar');
            const sidebar = document.getElementById('sidebar');
            toggleSidebar.addEventListener('click', () => {
                if (sidebar.classList.contains('w-220')) {
                    sidebar.classList.remove('w-220');  
                    sidebar.classList.add('w-20');
                    // 隐藏菜单文本
                    document.querySelectorAll('.menu-item span:first-of-type').forEach(text => { text.classList.add('hidden'); });
                    document.querySelectorAll('.submenu').forEach(submenu => { submenu.classList.add('hidden'); });
                    document.querySelectorAll('.menu-item i:last-child').forEach(icon => { icon.classList.add('hidden'); });
                } else {
                    sidebar.classList.remove('w-20');
                    sidebar.classList.add('w-220');
                    // 显示菜单文本
                    document.querySelectorAll('.menu-item span:first-of-type').forEach(text => { text.classList.remove('hidden'); });
                    // 恢复之前打开的子菜单
                    document.querySelectorAll('.menu-item-active').forEach(menu => {
                        const menuId = menu.getAttribute('data-menu');
                        const submenu = document.getElementById(`submenu-${menuId}`);
                        if (submenu) { submenu.classList.remove('hidden'); }
                    });
                    document.querySelectorAll('.menu-item i:last-child').forEach(icon => { icon.classList.remove('hidden'); });
                }
            });
            
            // 学习计划相关功能
            const createPlanModal = document.getElementById('create-plan-modal');
            
            // 打开创建计划模态框
            document.getElementById('btn-add-plan').addEventListener('click', () => {
                createPlanModal.classList.remove('hidden');
                createPlanModal.classList.add('flex');
            });
            
            // 关闭创建计划模态框
            document.getElementById('close-create-modal').addEventListener('click', () => {
                createPlanModal.classList.add('hidden');
                createPlanModal.classList.remove('flex');
            });
            
            // 取消创建计划
            document.getElementById('cancel-create-plan').addEventListener('click', () => {
                createPlanModal.classList.add('hidden'); 
                createPlanModal.classList.remove('flex');
            });
            
            // 点击模态框外部关闭
            createPlanModal.addEventListener('click', (e) => {
                if (e.target === createPlanModal) {
                    createPlanModal.classList.add('hidden');
                    createPlanModal.classList.remove('flex');
                }
            });
            
            // 提交创建计划
            document.getElementById('submit-create-plan').addEventListener('click', () => {
                // 表单验证和提交逻辑
                const planName = document.getElementById('plan-name').value;
                if (!planName) {
                    alert('请输入计划名称');
                    return;
                }
                
                alert(`学习计划"${planName}"创建成功！`);
                createPlanModal.classList.add('hidden');
                createPlanModal.classList.remove('flex');
            });
            
            // 继续学习按钮
            document.getElementById('continue-plan-1').addEventListener('click', () => {
                alert('正在跳转到"产品知识进阶计划"的学习页面...');
            });
            
            document.getElementById('continue-plan-2').addEventListener('click', () => {
                alert('正在跳转到"销售技巧提升计划"的学习页面...');
            });
            
            document.getElementById('continue-plan-3').addEventListener('click', () => {
                alert('正在跳转到"数据分析基础"的学习页面...');
            });
            
            // 加入推荐计划
            document.getElementById('enroll-plan-1').addEventListener('click', () => {
                alert('已加入"高级销售技巧提升"计划！');
            });
            document.getElementById('enroll-plan-2').addEventListener('click', () => {
                alert('已加入"客户关系管理"计划！');
            });
            document.getElementById('enroll-plan-3').addEventListener('click', () => {
                alert('已加入"数据可视化与分析"计划！');
            });
            // Tab切换功能
            const tabBtns = document.querySelectorAll('.tab-btn');
            const tabContents = document.querySelectorAll('.tab-content');
            
            tabBtns.forEach(btn => {
                btn.addEventListener('click', () => {
                    // 移除所有按钮active类
                    tabBtns.forEach(b => b.classList.remove('active', 'border-b-2', 'border-primary'));
                    // 添加当前按钮active类
                    btn.classList.add('active', 'border-b-2', 'border-primary');
                    
                    // 获取对应tab内容
                    const tabId = btn.getAttribute('data-tab');
                    
                    // 隐藏所有tab内容
                    tabContents.forEach(content => content.classList.remove('active'));
                    // 显示对应tab内容
                    document.getElementById(`${tabId}-tab`).classList.add('active');
                });
            });
        });</script>  
 </body>
</html>